<template>
  <div class="header">
    <div class="logo">
      <img src="../assets/IRIS.png" alt="" />

      <div class="title">智慧班级管理平台（教师端）</div>
    </div>
    <div class="user">
      <div v-if="isLogin" class="avatar">
        <el-dropdown>
          <el-avatar> user </el-avatar>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="store.logout()">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <div v-else class="notLogin">
        <div class="login" @click="dialogVisible = true">登录</div>
      </div>
    </div>
  </div>
  <el-dialog v-model="dialogVisible" title="登录" width="500">
    <el-form :model="form">
      <el-form-item label="用户名">
        <el-input v-model="form.userAccount" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="form.userPassword" type="password" placeholder="请输入密码"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="store.login(form),dialogVisible = false">登录</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { useUserStore } from '@/stores/user.ts'
import { storeToRefs } from 'pinia'
import { reactive, ref } from 'vue'
const dialogVisible = ref(false)
const { isLogin } = storeToRefs(useUserStore())
const store = useUserStore()

const form = reactive({
  userAccount: '',
  userPassword: ''
})

</script>
<style scoped lang="scss">
.header {
  width: 100%;
  background: white;
  height: 70px;
  display: flex;
  padding: 0 30px;
  justify-content: space-between;
  align-items: center;
  z-index: 1000; // 确保在其他元素之上
  position: fixed;
  top: 0;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  .logo {
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 30px;
    img {
      height: 95%;
      width: 80px;
    }
  }
  .user {
    .avatar {
      padding-right: 40px;
    }
    .notLogin {
      display: flex;
      gap: 8px;
      color: #b5b5b5;
      align-items: flex-end;
      padding-right: 20px;
      .login {
        cursor: pointer;
        font-size: 18px;
      }
      .register {
        cursor: pointer;
        font-size: 18px;
      }
    }
  }
}
</style>
